import React from 'react'
import '../../assets/css/profile/reg.less'
// import { List, Switch } from 'antd-mobile';
import { Toast} from 'antd-mobile';
import 'whatwg-fetch'
import 'antd-mobile/lib/toast/style/css'
import store from '../../store/index'
import { Form } from 'react-bootstrap';
class RegComponents extends React.Component{
    constructor(props){
        super(props)
        this.state={
            checked:false,
            phone:'',
            code:'',
            pwd:''
        }
    }
    //账号是否注册
    isreg(){
        const parmas = new URLSearchParams()
        parmas.append('username',this.state.phone)
        fetch('http://vueshop.glbuys.com/api/home/user/isreg?token=1ec949a15fb709370f',{
            method:'POST',
            body:parmas
        }).then((res)=>res.json())
            .then((res)=>{
                console.log(res);
                if(res.code===200){
                    if(res.data.isreg===1){
                        console.log('已注册');
                        Toast.success('此账号已注册', 1);
                    }else{
                        console.log('未注册');
                        this.setUser()
                    }
                }
            })
    }
    //注册成功
    succeedLogin(res){
        localStorage['login'] = 'true'
        localStorage['uid'] = res.data.uid
        // localStorage['nickname'] = res.data.nickname
        // localStorage['auth_token'] = res.data.auth_token
        store.dispatch({type:'login',value:localStorage['login']})
        console.log(store.getState());
        this.props.history.push('/')
    }
    // 注册
    setUser(){
        const parmas = new URLSearchParams()
        parmas.append('cellphone',this.state.phone)
        parmas.append('password',this.state.pwd)
        fetch('http://vueshop.glbuys.com/api/home/user/reg?token=1ec949a15fb709370f',{
            method:'POST',
            body:parmas
        }).then((res)=>res.json())
            .then((res)=>{
                console.log(res);
                if(res.code===200){
                    Toast.success('注册成功', 1);
                    //注册成功，跳转
                    this.succeedLogin(res)
                }
            })
    }
    // 验证
    reg(){
        if(this.state.phone===''){
            Toast.info('请输入手机号', 1, null, false);
            return
        }
        if(!(/^1[3456789]\d{9}$/.test(this.state.phone))){
            Toast.info('您输入的手机号格式不正确', 1,null,false);
            return ;
        }
        if(this.state.code===''){
            Toast.info('请输入验证码', 1,null,false);
            return ;
        }
        if(this.state.pwd===''){
            Toast.info('请输入密码', 1,null,false);
            return ;
        }
        this.isreg()
    }
    goBack(){
        this.props.history.goBack()
    }
    render() {
        return(
            <div id='reg'>
                <div className='header'>
                    <div onClick={this.goBack.bind(this)}>
                        <img src="/images/user/my/返回.png" alt=""/>
                    </div>
                    <div>会员注册</div>
                    <div></div>
                </div>
                <div className='input-bar'>
                    <div className='phone'>
                        <input type="text" placeholder='请输入手机号' onChange={(e)=>{
                            this.setState({
                                phone:e.target.value
                            },()=>{
                            })
                        }}/>
                    </div>
                    <div className='code'>
                        <div>
                            <input type="text" placeholder='请输入短信验证码' onChange={e=>{
                                this.setState({
                                    code:e.target.value
                                })
                            }}/>
                        </div>
                        <div>获取验证码</div>

                    </div>
                    <div className='password'>
                        <input type="password" placeholder='请输入密码' onChange={e=>{
                            this.setState({
                                pwd:e.target.value
                            })
                        }}/>
                    </div>
                    <div className='login-btn' onClick={this.reg.bind(this)}>注册</div>

                </div>

            </div>
        )
    }
}
export default RegComponents;